<template>
  <div class='manage-meetings'>
    <p class="title">{{title}} <el-button v-for="(item,index) in btnsData" :key="index" :type="item.type" class="btn-add fr" @click="item.click">{{item.label}}</el-button>
    </p>
    <el-tabs v-model="activeName" class="tab-box normal-tab" @tab-click="handleClick">
      <el-tab-pane class="table-box" v-for="(item,index) in tabData" :key="index" :label="item.label" :name="item.url">
      </el-tab-pane>
    </el-tabs>
    <div class="router-box"><router-view/></div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      title: "会议管理",
      btnsData: [
        // { label: "保存会议", type: "primary", click: this.save }
      ],
      tabData: [
        { label: "新增会议", url: "/manageMeetings/add" },
        { label: "会议管理", url: "/manageMeetings/records" },
      ],
      activeName: "/manageMeetings/add"
    };
  },
  methods: {
    // 保存
    save(){
      console.log("保存")
    },
    // 新增
    add() {
      this.$store.state.add.show = true;
    },
    handleClick() {
      // 清空原始数据
      this.$store.state.add.info={}
      this.$router.push({path:this.activeName});
    },

    setActive(){
      this.tabData.forEach(ele=>{
        if(_g.getRouterPath(this).indexOf(ele.url)>-1){
          this.$set(this,"activeName",ele.url)
          return
        }
      })
    },

    getSelectData(){
      _g.apiPost('meeting/selectDepartmentList.do').then(res=>{
        this.$set(this.$store.state.selectData.departsList,'data',res.data)
      })
    }
  },
  created() {
    this.setActive()
    this.getSelectData()
  }
};
</script>
<style lang="scss" scoped>
.manage-meetings {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;

  .title {
    font-weight: 600;
    font-size: 20px;
    background-color: #fff;
    text-indent: 20px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    // border-bottom: 1px solid #ebeef5;
  }
  // .tab-box {
  //   height: calc(100% - 60px);
  //   display: flex;
  //   flex-direction: column;
  // }
  .router-box{
    height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }
}
</style>